<template>
  <div class="home">
    <div class="li">
      <p>
        <span @click="us">{{address}}</span>
        <span>
          <van-icon name="arrow-down" />
        </span>
      </p>
      <h3>宏烨找房</h3>
      <p class="list9">
        <van-icon name="chat-o" />
      </p>
    </div>
    <div class="con">
      <div class="l">
      <div v-for="(item,index) in naverList" :key="index" class="rightlist" @click="jump(item.path,item.id)">
        <img :src="item.img" alt />
        <p class="title-i">{{item.title}}</p>
      </div>
    </div>
    <h2>团购优惠</h2>
    <div class="navliskk">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index" class="nav">
          <li class="navimg">
            <img v-lazy="image" />
          </li>
          <div class="navwe">
            <p>珑城半山公馆</p>
            <p>海口-龙华区</p>
            <p>
              3
              <span>天</span>10
              <span>小时</span>
            </p>
          </div>
          <div class="navright">
            <p>
              <span class="fon">36100</span>
              <span>元/m²</span>
            </p>
          </div>
        </van-swipe-item>
      </van-swipe>

      <van-tabs v-model="active" sticky @click="changeActive">
        <!-- 遍历渲染每一项文字 -->
        <!-- 必须有：title="item",要不然文字渲染不出来 -->
        <!-- 写van-tab 标签里面不能再写一个<van-tab>标签 -->
        <van-tab v-for="(item,index) in tablist" :key="index" :title="item">
          <!-- var是变量，不能胡写 -->
          <div v-for="(val,i) in list" :key="i" class="tablis">
            <li>
              <img :src="val.img" alt />
            </li>
            <div class="tab">
              <h3>{{val.area}}</h3>
              <p>{{val.detailAddress}}</p>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    </div>
    <!-- 这个盒子粘性布局 -->
  </div>
</template>
<script>
//别忘了也要引全
import { getRcommendData } from "../api/user";
import { mapState } from "vuex";
import axios from "axios";
import { navList } from "@/data/navList.js";
export default {
  data() {
    return {
      lis: [
        {
          img:
            "https://img1.baidu.com/it/u=211228414,420250473&fm=26&fmt=auto&gp=0.jpg"
        }
      ],
      images: [
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.uzzf.com%2Fup%2F2021-2%2F16139827008216612.jpg&refer=http%3A%2F%2Fpic.uzzf.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631410956&t=c1b0a8f0296da46847b02ed4aef2416d",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F16%2F07%2F06%2F17577cd55945262.jpg%21r650&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631410727&t=6d9d0b27241acf36f81ef6398425ad5d"
      ],
      tablist: ["新房", "二手房", "商铺", "写字楼", "租房"],
      list: [],
      active: 0,
      naverList: navList
    };
  },
  created() {
    this.getRcommendDat();
    // this.changeActive(0)
  },

  methods: {
    changeActive(e) {
      //打印点击的e指的是下标

      console.log(e);
      this.active = e; //每点击一项
      this.getRcommendDat();
    },
    getRcommendDat() {
      //classify是归类的意思
      getRcommendData({ classify: this.active + 1 }).then(response => {
        console.log(response);
        this.list = response.data;
      });
    },
    bandleok(id) {
      this.$router.push(`/detail/${id}`);
    },
    us() {
      this.$router.push("/changecity");
    },
    jump(path,id){
      //如果拿到的id为3||id为4||id=6
      if(id===3||id===4||id===6){
        this.$router.push(`/shoplist/${id}`)
      }else{
        this.$router.push(path)
      }
    }
  },
  computed: {
    ...mapState(["address"])
  }
};
</script>
<style lang="scss">
.li{
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list9 {
  margin-right: 10px;
}
.con{
  flex: 1;
  overflow: auto;
}
.title-i{
  margin-left: -5px;
}
.l{
  padding-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.rightlist {
  width: 25%;
  text-align: center;
  padding-bottom: 5px;
 
  
}

.rightlist img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}
.lis {
  margin-top: 20px;
}
.navliskk {
  margin-top: 20px;
}
.navliskk li {
  width: 70px;
  height: 70px;
  
}
.navliskk li img {
  width: 100%;
  height: 100%;
  margin-left: 20px;
 
}
h2 {
  margin-top: 20px;
  margin-left: 20px;
}
.nav {
  display: flex;
}
.navwe {
  margin-left: 20px;
}
.navright {
  margin-top: 50px;
}
.fon {
  font-size: 20px;
}
.navwe p:first-child {
  font-size: 18px;
}
.navwe p:nth-child(2) {
  color: #ccc;
}
.navwe p:last-child span {
  color: #ccc;
  margin-left: 5px;
}
.tablis {
  display: flex;
  margin-top: 10px;
}
.tablis li {
  width: 100px;
  height: 100px;
}
.tablis li img {
  width: 100%;
  height: 100%;
}
.tab {
  margin-left: 20px;
}
</style>
